<template>
  <div class="block-wrap">
    <div class="title">
      <span class="bar"></span>
      <span class="text">商户信息</span>
    </div>
    <div class="content-wrap">
      <el-descriptions :column="3" border v-if="detailInfo">
        <el-descriptions-item label="状态" label-align="right" align="center" label-class-name="my-label">
          <dict-tag :options="audit_status" :value="detailInfo.auditStatus" />
        </el-descriptions-item>
        <el-descriptions-item label="平台商户号" label-align="right" align="center" label-class-name="my-label">{{ detailInfo.outMerchantNo }} </el-descriptions-item>
        <el-descriptions-item label="入网类型" label-align="right" align="center" label-class-name="my-label">
          <dict-tag :options="laiqianle_register_type" :value="detailInfo.netType" />
        </el-descriptions-item>
        <el-descriptions-item label="是否直接接入" label-align="right" align="center" label-class-name="my-label">
          {{ detailInfo.isDirectConnect ? '直接接入' : '非直接接入' }}
        </el-descriptions-item>
        <!-- 新增字段  2025.4.9 -->
        <el-descriptions-item label="是否电子签约" label-align="right" align="center" label-class-name="my-label">
          {{ detailInfo.isUseElecAgreement === 'true' || detailInfo.isUseElecAgreement === true ? '是' : '否' }}
        </el-descriptions-item>
        <el-descriptions-item label="商户名称" label-align="right" align="center" label-class-name="my-label"> {{ detailInfo.merchantName }} </el-descriptions-item>
        <el-descriptions-item label="商户简称" label-align="right" align="center" label-class-name="my-label"> {{ detailInfo.shortName }} </el-descriptions-item>
        <el-descriptions-item label="执照类型" label-align="right" align="center" label-class-name="my-label">
          <dict-tag :options="laiqianle_license_type" :value="detailInfo.licenceType" />
        </el-descriptions-item>
        <el-descriptions-item label="执照编号" label-align="right" align="center" label-class-name="my-label"> {{ detailInfo.licenceNo }} </el-descriptions-item>
        <el-descriptions-item label="执照有效期" label-align="right" align="center" label-class-name="my-label">
          {{ detailInfo.licenceExpireDate }}
        </el-descriptions-item>
        <el-descriptions-item label="经营范围" label-align="right" align="center" label-class-name="my-label"> {{ detailInfo.manageScope }} </el-descriptions-item>
        <el-descriptions-item label="经营类目" label-align="right" align="center" label-class-name="my-label">
          {{ handleFilter(businessTypeOptions, detailInfo.manageTypeId + '', 'code') }}
        </el-descriptions-item>
        <el-descriptions-item label="省市区" label-align="right" align="center" label-class-name="my-label">
          {{ handleFilter(provincesList, detailInfo.addressinfoId.province, 'id') }} - {{ handleFilter(provincesList, detailInfo.addressinfoId.city, 'id') }} -
          {{ handleFilter(provincesList, detailInfo.addressinfoId.district, 'id') }}
        </el-descriptions-item>
        <el-descriptions-item label="商户地址" label-align="right" align="center" label-class-name="my-label">
          {{ detailInfo.addressinfoId.address }}
        </el-descriptions-item>
        <el-descriptions-item label="证件类型" label-align="right" align="center" label-class-name="my-label">
          <dict-tag :options="laiqianle_card_type" :value="detailInfo.lepCertType" />
        </el-descriptions-item>
        <el-descriptions-item label="法人证件编号" label-align="right" align="center" label-class-name="my-label"> {{ detailInfo.lepCertNo }} </el-descriptions-item>
        <el-descriptions-item label="法人名称" label-align="right" align="center" label-class-name="my-label"> {{ detailInfo.lepCertName }} </el-descriptions-item>
        <el-descriptions-item label="法人证件有效期" label-align="right" align="center" label-class-name="my-label">
          {{ detailInfo.lepCertExpireDate }}
        </el-descriptions-item>
        <el-descriptions-item label="联系人" label-align="right" align="center" label-class-name="my-label"> {{ detailInfo.contactName }} </el-descriptions-item>
        <el-descriptions-item label="联系人手机" label-align="right" align="center" label-class-name="my-label"> {{ detailInfo.contactMobile }} </el-descriptions-item>
        <el-descriptions-item label="注册资金" label-align="right" align="center" label-class-name="my-label"> {{ detailInfo.registeredCapital }} </el-descriptions-item>
        <el-descriptions-item label="备注" label-align="right" align="center" label-class-name="my-label"> {{ detailInfo.remarks }} </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
  <el-divider />
  <div class="block-wrap">
    <div class="title">
      <span class="bar"></span>
      <span class="text">账号信息</span>
    </div>
    <div class="content-wrap">
      <el-alert :closable="false" title="温馨提示：此账号为结算账号(入账账号)" type="info" class="mb20" show-icon />
      <el-descriptions :column="3" border v-if="detailInfo">
        <!-- <el-descriptions-item label="结算类型" label-align="right" align="center" label-class-name="my-label"> {{ detailInfo.settleAccount }} </el-descriptions-item>-->
        <!-- <el-descriptions-item label="结算时间点" label-align="right" align="center" label-class-name="my-label"> {{ detailInfo.settleAccount }} </el-descriptions-item>-->
        <!-- <el-descriptions-item label="提现方式" label-align="right" align="center" label-class-name="my-label"> {{ detailInfo.settleAccount }} </el-descriptions-item>-->
        <el-descriptions-item label="账号性质" label-align="right" align="center" label-class-name="my-label">
          {{ detailInfo.settleAccount.bankAccountType === 1 ? '对公' : '对私' }}
        </el-descriptions-item>
        <el-descriptions-item label="银行账号" label-align="right" align="center" label-class-name="my-label">
          {{ detailInfo.settleAccount.bankAccountNo }}
        </el-descriptions-item>
        <el-descriptions-item label="账号名称" label-align="right" align="center" label-class-name="my-label">
          {{ detailInfo.settleAccount.bankAccountName }}
        </el-descriptions-item>
        <el-descriptions-item label="银行类型" label-align="right" align="center" label-class-name="my-label">
          {{ handleFilter(bankOptions, detailInfo.settleAccount.bankCode + '', 'code') }}
        </el-descriptions-item>
        <el-descriptions-item label="开户行" label-align="right" align="center" label-class-name="my-label">
          {{ detailInfo.settleAccount.openBank }}
        </el-descriptions-item>
        <el-descriptions-item label="预留手机" label-align="right" align="center" label-class-name="my-label">
          {{ detailInfo.settleAccount.acctMobile || '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="证件类型" label-align="right" align="center" label-class-name="my-label">
          <dict-tag :options="laiqianle_card_type" :value="detailInfo.settleAccount.accountIdentityType" v-if="detailInfo.settleAccount.accountIdentityType" />
          <span v-else>--</span>
        </el-descriptions-item>
        <el-descriptions-item label="持卡人证件号" label-align="right" align="center" label-class-name="my-label">
          {{ detailInfo.settleAccount.accountIdentityNo || '--' }}
        </el-descriptions-item>
      </el-descriptions>

      <el-alert :closable="false" title="温馨提示：此账号为备案账号" type="info" class="mb20" show-icon v-if="detailInfo.filingAccount.bankAccountNo" />
      <el-descriptions :column="3" border v-if="detailInfo.filingAccount.bankAccountNo">
        <!-- <el-descriptions-item label="结算类型" label-align="right" align="center" label-class-name="my-label"> {{ detailInfo.settleAccount }} </el-descriptions-item>-->
        <!-- <el-descriptions-item label="结算时间点" label-align="right" align="center" label-class-name="my-label"> {{ detailInfo.settleAccount }} </el-descriptions-item>-->
        <!-- <el-descriptions-item label="提现方式" label-align="right" align="center" label-class-name="my-label"> {{ detailInfo.settleAccount }} </el-descriptions-item>-->
        <el-descriptions-item label="银行账号" label-align="right" align="center" label-class-name="my-label">
          {{ detailInfo.filingAccount.bankAccountNo }}
        </el-descriptions-item>
        <el-descriptions-item label="账号名称" label-align="right" align="center" label-class-name="my-label">
          {{ detailInfo.filingAccount.bankAccountName }}
        </el-descriptions-item>
        <el-descriptions-item label="银行类型" label-align="right" align="center" label-class-name="my-label">
          {{ handleFilter(bankOptions, detailInfo.filingAccount.bankCode + '', 'code') }}
        </el-descriptions-item>
        <el-descriptions-item label="开户行" label-align="right" align="center" label-class-name="my-label">
          {{ detailInfo.filingAccount.openBank }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
  <el-divider />
  <div class="block-wrap">
    <div class="title">
      <span class="bar"></span>
      <span class="text">支付方式信息</span>
    </div>
    <div class="content-wrap">
      <el-descriptions :column="1" border v-if="detailInfo">
        <el-descriptions-item label="银行卡" label-align="right" align="center" label-class-name="my-label">
          贷记卡费率:{{ detailInfo.cardPay.feeRate }}%；借记卡费率:{{ detailInfo.cardPay.debitRate }}%；借记卡封顶值:{{ detailInfo.cardPay.debitCap }}；
        </el-descriptions-item>
        <el-descriptions-item label="银联" label-align="right" align="center" label-class-name="my-label">
          银联扫码优惠费率:{{ detailInfo.quickPassPay.perferStage.feeRate }}%
        </el-descriptions-item>
        <el-descriptions-item label="微信" label-align="right" align="center" label-class-name="my-label"> 费率:{{ detailInfo.wxPay.feeRate }}% </el-descriptions-item>
        <el-descriptions-item label="支付宝" label-align="right" align="center" label-class-name="my-label"> 费率:{{ detailInfo.aliPay.feeRate }}% </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
  <el-divider />
  <div class="block-wrap">
    <div class="title">
      <span class="bar"></span>
      <span class="text">图片信息</span>
    </div>
    <div class="content-wrap img-wrap">
      <template v-for="(item, index) in detailInfo.fileList" :key="index">
        <div class="img-item" v-if="detailInfo.isUseElecAgreement == 'false' || detailInfo.isUseElecAgreement == false || imgName[item.fileTypeId] !== '签约协议照片'">
          <div>
            <ImagePreview :src="item.path" :width="150" :height="100" />
          </div>
          <div class="text">{{ imgName[item.fileTypeId] }}</div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { businessTypeList, getRegister, getAreaList, bankList } from '@/api/laiqianle/register';
  import { useDict } from '@/utils/dict';
  import ImagePreview from '@/components/ImagePreview/index.vue';
  // 字典 laiqianle_register_type 入网类型  laiqianle_card_type 证件类型  laiqianle_license_type 营业执照类型
  const dict = ['laiqianle_register_type', 'laiqianle_card_type', 'laiqianle_license_type', 'audit_status'];
  const { laiqianle_register_type, laiqianle_card_type, laiqianle_license_type, audit_status } = useDict(...dict);

  const props = defineProps({
    detailId: {
      type: String,
      default: '',
    },
  });
  // 图片名称
  const imgName = {
    11: '证件正面',
    12: '证件反面',
    15: '营业执照',
    13: '结算账户正面',
    21: '备案账户正面',
    31: '签约协议照片',
    18: '门店照片',
    19: '收银台照片',
    20: '店内商品照片',
    41: '委托入款授权照片',
    24: '法人和入账人手持身份证合照',
    22: '非法人身份证正面',
    23: '非法人身份证反面',
  };

  // 经营类型
  interface BusinessType {
    id: number;
    name: string;
    code: string;
    pcode: string;
    children: BusinessType[];
    [key: string]: any;
  }
  const businessTypeOptions = ref<BusinessType[]>([]);
  const getBusinessTypeList = async () => {
    const { data } = await businessTypeList();
    businessTypeOptions.value = data;
  };

  // 地址省市区
  interface provinces {
    id: number;
    name: string;
    code: string;
    pcode: string;
    [key: string]: any;
  }
  const provincesList = ref<provinces[]>([]);
  const getProvincesList = async () => {
    const { data } = await getAreaList();
    provincesList.value = data;
  };

  // 银行列表
  interface BankOptions {
    id: string;
    name: string;
    code: string;
    [key: string]: any;
  }
  const bankOptions = ref<BankOptions[]>([]);
  const getBankList = async () => {
    const { rows } = await bankList();
    bankOptions.value = rows;
  };

  // 过滤
  const handleFilter = (list, value, code) => {
    const result = list.filter((item) => item[code] === value);
    return result.length ? result[0]?.name || result[0]?.bankName : '';
  };

  const detailInfo = ref();
  const handleDetail = async (id: string) => {
    const { data } = await getRegister(id);
    detailInfo.value = data;
  };

  getProvincesList();
  getBusinessTypeList();
  await getBankList();
  await handleDetail(props.detailId);
</script>

<style scoped lang="scss">
  .img-wrap {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    .img-item {
      text-align: center;
      margin-right: 90px;
      margin-bottom: 20px;
      .text {
        margin-top: 6px;
      }
    }
  }
  .mb20 {
    margin-bottom: 20px;
  }
  .block-wrap {
    margin-top: 20px;
    .title {
      display: flex;
      align-items: center;
      .bar {
        width: 4px;
        height: 20px;
        background-color: #409eff;
        margin-right: 10px;
      }
      .text {
        font-size: 16px;
        color: #333;
      }
    }

    .content-wrap {
      box-sizing: border-box;
      width: 100%;
      padding: 0 20px;
      margin-top: 30px;
      min-height: 200px;
    }
    &:deep(.my-label) {
      width: 130px;
      min-width: 100px;
      max-width: 200px;
    }
  }
</style>
